import React, { Component } from 'react';
import { 
	Image, 
	ScrollView, 
	StyleSheet, 
	Text, 
	Dimensions, 
	TouchableOpacity,
	Alert,
	StatusBar,
	View,
	ListView,
	RefreshControl,
	PixelRatio,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import FitImage from 'react-native-fit-image';
import timeago from 'timeago.js';

import Header from '../../components/Header';
import Comment from './Comment';
import ImageDetail from './ImageDetail';
import NewsItemHeader from './NewsItemHeader';

var timeagoInstance = timeago();
let {width,height} = Dimensions.get("window");
import WriteBar from './WriteBar';
import {
	scaleSize,
	setSpText
} from './util';
import CustomImage from './CustomImage';
export default class NewsDetailPage extends Component{
	constructor(props) {
	  super(props);
	
	  this.state = {
	  	refreshing:false,
	  };
	  this.ds=new ListView.DataSource({
			rowHasChanged(r1,r2){
				return r1!==r2;
			}
	  })
	}
	renderWH(url){

		
	}
	jumpImageDetail(imgs,index){
		this.props.navigator.push({
			component:ImageDetail,
			passProps:{
			    imgs:imgs,
			    imgIndex:index,
			}		
		})			
	}
renderImgs(post_imgs=[]){
		var imgs=[];
		// console.log(this.jumpImageDetail)
		if(post_imgs.length>=3){
			imgs = post_imgs.map((item,index)=>{
					// console.log(item);
				return (
				<TouchableOpacity  
							onPress={()=>this.jumpImageDetail(post_imgs,index)} 
							style={{flexDirection:'row',margin:scaleSize(4)}} key={index}>
					<Image  source={{uri:item.url}} style={{width:scaleSize(320),height:scaleSize(320)}} />
				</TouchableOpacity>
				)
			})
			
		}else if(post_imgs.length==2){
			imgs = post_imgs.map((item,index)=>{
					console.log(item);
				return (
				<TouchableOpacity  
							onPress={()=>this.jumpImageDetail(post_imgs,index)} 
							style={{flexDirection:'row',margin:scaleSize(4),flex:1,height:scaleSize(320)}} key={index}>
					<Image  source={{uri:item.url}} style={{flex:1}} />
				</TouchableOpacity>
				)
			})			
		}else if(post_imgs.length==1){
			imgs = post_imgs.map((item,index)=>{
					console.log(item);
				return (
				<TouchableOpacity  
							onPress={()=>this.jumpImageDetail(post_imgs,index)} 
							style={{flexDirection:'row',margin:scaleSize(4),flex:1}} key={index}>
					<CustomImage url={item.url}  source={{uri:item.url}} style={{flex:1}} />
				</TouchableOpacity>
				)
			})	
			// var div = <View style={{flex:1}} />
			// imgs.push(div);			
		}
		return imgs;
		
	}	

	render(){
		let {
			id,
			is_more,
			logo,
			navigator,
			nickname,
			post_imgs,
			post_tag,
			post_time,
			post_text,
			read_count,
			remark_count,
			remarks,
			zan_count
		} = this.props;
		return (
			<View style={[styles.container]}>
				<Header 
				title="详情页" 
				leftIcon={'angle-left'}
				leftIconAction={()=>this.props.navigator.pop()}
				></Header>
				<ListView 
					ref={(e)=>this.listView=e}
					style={{backgroundColor:"#fff"}}
					dataSource={this.ds.cloneWithRows(remarks)}
					renderHeader={this.renderHeader.bind(this)}
					renderRow={this.renderRow.bind(this)}
					enableEmptySections
					refreshControl={
					    <RefreshControl
					        refreshing={this.state.refreshing}
					        onRefresh={() => this.onRefresh()}
					        tintColor='gray'
					    />
					}	
					renderFooter={() => this.renderFooter()}					
					onEndReachedThreshold={20}
					onEndReached={() => this.onFooterRefresh()}				
				/>	
				<WriteBar onSubmit={this.onSubmit.bind(this)} onChangeText={(text)=>this.commentText=text} />
			</View>
			);
	}

	onSubmit(){
		var text = this.commentText;
			//发送请求；
	}
	renderHeader(){
		let {
			id,
			is_more,
			logo,
			navigator,
			nickname,
			post_imgs,
			post_tag,
			post_time,
			post_text,
			read_count,
			remark_count,
			remarks,
			zan_count
		} = this.props;		
		return (
			<View  style={{marginBottom:10}}>
					<NewsItemHeader logo={logo} post_time={post_time} post_tag={post_tag} nickname={nickname}/>
					<View style={{flex:1,paddingHorizontal:12,paddingBottom:10}}>
							<Text style={{
								paddingBottom:6,					
							}}>
								{post_text}
							</Text>	
							<View style={styles.imgList}>
							{this.renderImgs(post_imgs)}
								
							</View>
							<Text style={{color:'#9e9e9e',marginTop:6}}>{read_count}人阅读</Text>
						</View>		
					<View style={{height:scaleSize(20),width:width,backgroundColor:"#f4f5f6"}}/>
					<View style={styles.commentHeader}>
						<Text>评论 {remark_count}</Text>
						<Text>{zan_count} 赞</Text>
					</View>			
					<View style={{height:1,width:width,backgroundColor:"#f4f5f6"}}/>					
			</View>
			)
	}
	renderRow(row,sectionId){
		return <Comment  remark={row} key={row+sectionId} />
	}
	onRefresh(){

	}
	renderFooter(){

	}
	onFooterRefresh(){

	}
}


const styles=StyleSheet.create({
	container:{
		flex:1,
	
	},
	imgList:{
		flex:1,
		marginTop:10,
		marginBottom:10,
		flexDirection:"row",
		flexWrap:"wrap",
	},	
	rowItemContent:{
		paddingHorizontal:12,
		paddingVertical:13,
	},	
	commentHeader:{
		flexDirection:'row',
		justifyContent:"space-between",
		paddingHorizontal:12,
		alignItems:'center',
		height:40,
		backgroundColor:'#fff'
	}
})





